<template>
    <div>

        <div style="margin-bottom:5px;">
            <el-input v-model="name" placeholder="请输入姓名" style="width:200px;" @keyup.enter.native="loadDoctor"></el-input>
            <el-button type="primary" style="margin-left:5px;" @click="loadDoctor">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="primary" @click="add">新增</el-button>

        </div>
        <el-table :data="DoctorData"
            :header-cell-style="{background: '#f3f6fd',color:'#555'}">
            <!-- <el-table-column prop="id" label="ID" width="120">
            </el-table-column> -->
            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="departmentId" label="所属科室" width="150" :formatter="formatDep">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="100">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.sex === 1 ? 'primary' : 'danger'"
                            disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="200">
            </el-table-column>
            <el-table-column prop="position" label="职位" width="200">
            </el-table-column>
            <el-table-column prop="remark" label="介绍" width="200">
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm title="确定删除" @confirm="del(scope.row.id)" style="margin-left:5px;">
                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"

            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

        </el-pagination>
        <!-- 表单 -->
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="账号" prop="account">
                    <el-col :span="20">
                        <el-input v-model="form.account"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="20">
                        <el-input v-model="form.password"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-col :span="20">
                        <el-date-picker v-model="form.birthday"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="职位" prop="position">
                    <el-col :span="20">
                        <el-input v-model="form.position"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="科室" prop="departmentId">
                    <el-col :span="20">
                        <el-select v-model="form.departmentId" placeholder="科室" style="margin-left:5px;">
                            <el-option
                                v-for="item in depData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="简介" prop="remark">
                    <el-col :span="20">
                        <el-input v-model="form.remark"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import ApiService from "@/apiService";

export default {
    name: 'DoctorManger',
    data() {
        return {
            DoctorData:[],
            depData: [],
            pageSize:20,
            pageNum:1,
            total:0,
            name:'',
            doctor:'',
            centerDialogVisible:false,
            form:{
                id:'',
                account:'',
                name:'',
                sex:'0',
                phone:'',
                birthday:'',
                password:'',
                img:'',
                position:'',
                departmentId:'',
                remark:'',
            },
            rules:{
                name:[
                    {required:true,message:'请输入姓名',trigger:'blur'},
                ],
            }

        }
    },

    methods:{
        formatDep(row){
            let temp = this.depData.find(item=>{
                return item.id == row.departmentId
            })
            return temp && temp.name
        },
        add(){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.resetForm() 
                this.form.id = ''})
        },

        mod(row){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.form.id = row.id
                this.form.account = row.account
                this.form.name = row.name
                this.form.password = ""
                this.form.sex = row.sex
                this.form.phone = row.phone
                this.form.birthday = row.birthday+''
                this.form.img = row.img
                this.form.departmentId = row.departmentId
                this.form.position = row.position
                this.form.remark = row.remark
            })
        },

        async loadDep(){
            const response = await ApiService.get('/department/list');

            if(response.code===200){
                this.depData=response.data
            }else{
                alert('获取数据失败')
            }
        },
        async loadDoctor(){
            const response = await ApiService.post('/doctor/listPage', {
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param:{  //查询返回姓名
                    name:this.name,
                }
            });

            if(response.code===200){
                this.DoctorData=response.data
                this.total=response.total
            }else{
                alert('获取数据失败')
            }
        },

        //  编辑/更新 功能
        async doMod(){
            const response = await ApiService.post('/doctor/update', this.form);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadDoctor()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },
        
        async doSave(){
            const response = await ApiService.post('/doctor/save', this.form);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadDoctor()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },

        save(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    if(this.form.id){
                        this.doMod();
                    }else{
                        this.doSave();
                    }
                }else{
                    console.log('error submit!!')
                    return false;
                }
            });

            
        },
        //删除功能
        async del(id){
            const response = await ApiService.get('/doctor/del?id='+id);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.loadDoctor()
            }else{
                this.$message({message:response.msg,type:'error'})
            }
        },


        resetForm(){
            this.$refs.form.resetFields();
        },

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1
        this.pageSize=val
        this.loadDoctor()
        },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val
        this.loadDoctor()
        },

        resetParam(){
            this.name='';
        },


    },


    beforeMount(){
        this.loadDep()
        this.loadDoctor()
    }
    

  
}
</script>


<style scoped>

</style>
